<template>
  <div class="text-wrapper" :style="textStyle">{{ subject.text }}</div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { calculateStyle } from "@/util/style";
export default defineComponent({
  name: "Text",
  props: ["componentParams"],
  setup(props) {
    const { TextForm, BackgroundForm } = props.componentParams as any;
    const textStyle = computed(() => {
      const localTextStyle = calculateStyle(TextForm.property);
      const localBackgroundStyle = calculateStyle(BackgroundForm.property);
      return { ...localTextStyle, ...localBackgroundStyle };
    });

    return {
      textStyle,
      subject: TextForm.subject,
    };
  },
});
</script>

<style lang="scss" scoped>
.text-wrapper {
  width: 100%;
  height: 100%;
}
</style>
